<template>
  <div class="bg_view">
    <!-- <cus-header bgColor="#fff" :isback="true" title="确认信息"></cus-header> -->

    <div class="progress_box">
      <div style="color: #5aadfb">上传证件</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div style="color: #5aadfb">选择病历</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div style="color: #5aadfb">填写信息</div>
      <div class="omit" style="color: #5aadfb">...</div>
      <div style="color: #5aadfb">支付押金</div>
    </div>
    <div class="address_box">
      <div class="address_box_1">
        <div><span></span>复印病历</div>
        <div></div>
      </div>
      <div class="address_box_3">
        <div><span class="span">患者姓名：</span>{{ qsdata.patientName }}</div>
      </div>
      <div class="address_box_3">
        <div><span class="span">证件号码：</span>{{ qsdata.idNo }}</div>
      </div>

      <div class="address_box_3">
        <div><span class="span">住 院 号 ：</span>{{ qsdata.inpatientNo }}</div>
      </div>
    </div>
    <div class="gap"></div>
    <div class="address_box" style="padding-top: 1rem">
      <div class="address_box_3">
        <div>办理方式</div>
        <div>
          <span v-if="qsdata.method == 1">本人办理</span>
          <span v-if="qsdata.method == 2">他人办理</span>
          <span v-if="qsdata.method == 3">医疗机构办理</span>
          <span v-if="qsdata.method == 4">儿童办理</span>
        </div>
      </div>
    </div>
    <div class="gap"></div>
    <!-- 本人 -->
    <div v-if="qsdata.method == 1" class="address_box">
      <div class="address_box_1">
        <div><span></span>本人证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" alt=""/>
        </div>

      </div>
    </div>
    <!-- 他人 -->
    <div v-if="qsdata.method == 2" class="address_box">
      <div class="address_box_1">
        <div><span></span>患者证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" alt=""/>
        </div>

      </div>
      <div class="gap"></div>
      <div class="address_box_1">
        <div><span></span>委托代理人证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.agentIdNo2" alt=""/>
        </div>

      </div>

    </div>
    <!-- 保险机构 -->
    <div v-if="qsdata.method == 3" class="address_box">
      <div class="address_box_1">
        <div><span></span>患者证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" alt=""/>
        </div>

      </div>
      <div class="gap"></div>
      <div class="address_box_1">
        <div><span></span>保险合同复印件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.agentIdNo2" alt=""/>
        </div>

      </div>
      <div class="gap"></div>
      <div class="address_box_1">
        <div><span></span>委托代理人证书</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentBook" alt=""/>
        </div>
      </div>
    </div>
    <!-- 儿童 -->
    <div v-if="qsdata.method == 4" class="address_box">
      <div class="address_box_1">
        <div><span></span>儿童患者相关证明</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.patientIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.patientIdNo2" alt=""/>
        </div>
        <div></div>
      </div>
      <div class="gap"></div>

      <div class="address_box_1">
        <div><span></span>亲属证件</div>
        <div></div>
      </div>
      <div class="papers_box">
        <div>
          <img :src="qsdata.agentIdNo1" alt=""/>
        </div>
        <div>
          <img :src="qsdata.agentIdNo2" alt=""/>
        </div>

      </div>

    </div>
    <div class="gap"></div>
    <div class="address_box">
      <div class="address_box_1">
        <div><span></span>复印病历</div>
        <div></div>
      </div>
      <div class="address_box_3">
        <div><span class="span">就诊科室：</span>{{ qsdata.patientDept }}</div>
      </div>
      <div class="address_box_3">
        <div>
          <span class="span">就诊医生：</span>{{ qsdata.patientDoctor }}
        </div>
      </div>
      <!-- <div class="address_box_3">
        <div><span>病 床 号 ：</span>消化内科</div>
      </div>
      <div class="address_box_3">
        <div><span>诊断结果：</span>消化内科</div>
      </div> -->
      <div class="address_box_3">
        <div>
          <span class="span">入院时间：</span>{{ qsdata.patientInDate }}
        </div>
      </div>
      <div class="address_box_3">
        <div>
          <span class="span">出院时间：</span>{{ qsdata.patientOutDate }}
        </div>
      </div>
    </div>
    <div class="gap"></div>
    <div class="flex_box">
      <div class="acDiv1">复印份数:</div>
      <div class="acDiv2">
        1
      </div>
    </div>
    <!-- <div class="xian"></div>
    <div class="flex_box">
      <div class="acDiv1">复印用途:</div>
      <div class="acDiv2">{{ this.qsdata.purpose }}</div>
    </div> -->
    <div class="xian"></div>
    <div class="flex_box">
      <div class="acDiv1">备&#x3000;&#x3000;注:</div>
      <div class="acDiv2">{{ this.qsdata.remark }}</div>
    </div>

    <div class="gap"></div>
    <div class="address_box">
      <div class="address_box_1">
        <div><span></span> 邮寄地址</div>
      </div>

      <div class="address_box_2">
        <div class="right">
          <div>{{ qsdata.expressReceiver }}</div>
          <div>&#x3000;{{ qsdata.expressPhone }}</div>
        </div>
      </div>
      <div class="address_box_2">
        <div>
          <span style="font-size: 0.8125rem; color: #949fb4">{{
              qsdata.expressProvince +
              qsdata.expressArea +
              qsdata.expressCity +
              qsdata.expressAddress
            }}</span>
        </div>
      </div>
    </div>
    <div class="gap"></div>
    <div class="address_box">
      <div class="address_box_1">
        <div><span></span>复印押金</div>
        <div></div>
      </div>
      <div class="address_box_3">
        <div>
          复印费用&#x3000;<span>￥200.00</span
        ><span style="color: #f72d23">（计算实际费用后退回多余押金）</span>
        </div>
        <div></div>
      </div>
    </div>
    <div style="height: 5rem"></div>

    <div class="payBottom" v-if="payInfo.unPay != 0">
      <div class="payBottom_1">&#x3000; 合计：<span>￥200.00</span></div>
      <div class="payBottom_2" @click="recordCopy()">立即支付</div>
    </div>
    <confirm
      v-model="show"
      title="取消申请"
      @on-cancel="onCancel"
      @on-confirm="onConfirm"
    >
      <p style="text-align: center">您填写的内容将被全部清空，确认取消吗？</p>
    </confirm>
  </div>
</template>
<script>
import {Confirm} from "vux";
import {recordCopy, payCreate, jeepayCreate} from "@/api/api";

export default {
  components: {
    Confirm,
  },
  data() {
    return {
      orderId: "",
      number: 1,
      show: false,
      checkedList: [],
      copyRecord: {},
      payInfo: {},
      userInfo: {},
    };
  },
  created() {
    if (window.localStorage.getItem("cardInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("cardInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultCardInfo")
      );
    }
    if (window.localStorage.getItem("copyModuleList")) {
      this.checkedList = JSON.parse(
        window.localStorage.getItem("copyModuleList")
      );
    }
    if (window.localStorage.getItem("copydata")) {
      var copydata = JSON.parse(window.localStorage.getItem("copydata"));
      this.qsdata = copydata;
    }
  },
  methods: {
    goPay(orderId) {

      // 获取微信配置
      const that = this;
      this.payCreate(orderId);
    },
    payCreate(orderId) {
      const that = this;
      jeepayCreate({
        orderType: "3",
        orderId,
        openId: window.localStorage.getItem("openId"),
      }).then((res) => {
        if (res.code == 200) {
          // 调起微信支付
          that.wxPay(res.data);
        } else {
          alert(res.message);
          if (res.code == 1355) {
          }
        }
      });
    },
    // 发起微信支付
    wxPay(data) {
      const that = this;
      WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        {
          appId: data.appId, //公众号名称，由商户传入
          timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
          nonceStr: data.nonceStr, //随机串
          package: data.package,
          signType: data.signType, //微信签名方式：
          paySign: data.paySign, //微信签名
        },
        function (response) {
          //TODO 应该再进行一次查单验证来保证支付成功
          if (response.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            // res.err_msg将在用户支付成功后返回get_brand_wcpay_request:ok，但并不保证它绝对可靠。
            that.$vux.toast.show({
              text: "支付成功",
              type: "success",
            });
            setTimeout(() => {
              that.$router.replace({
                path: "/medical_record_copy_details",
                query: {
                  id: that.copyRecord.id,
                },
              });
            }, 2000);
          } else {
            that.$vux.toast.show("支付失败");
          }
        }
      );
    },
    // 病历复印下单
    recordCopy() {
      const that = this;
      //校验openId
      var openId = window.localStorage.getItem("openId");
      if (typeof openId === 'undefined' || openId == null || openId === '') {
        that.$vux.toast.show("获取支付信息失败,请退出登录后重试");
        return;
      }
      if (that.orderId) {
        //已有订单,无需重复下单
        that.goPay(res.data.orderId);
        return;
      } else {
        recordCopy(that.qsdata).then((res) => {
          if (res.code == 200) {
            that.copyRecord = res.data;
            that.goPay(res.data.orderId);
          }
        });
      }
    },
    showFun() {
      this.show = true;
    },
    onCancel() {
      this.show = false;
    },
    onConfirm() {
      this.show = false;
      this.$router.replace({path: "/Medical_record_copy"});
    },
  },
};
</script>
<style scoped>
.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.progress_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  background-color: #f7fafd;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 0 1rem;
  color: #b6becc;
  font-size: 0.9375rem;
  line-height: 2.75rem;
}

.progress_box .omit {
  line-height: 2.25rem;
}

.number {
  display: flex;
  align-items: center;
}

.number > img {
  width: 0.9375rem;
  height: 0.9375rem;
}

.number > div {
  margin: 0px 0.5625rem;
}

.gap {
  width: calc(100%);
  height: 0.625rem;
  background-color: #f7fafd;
}

.xian {
  width: calc(100% - 2rem);
  height: 1px;
  background-color: #E7ECF5;
  margin: 0 auto;
}

.flex_box {
  width: calc(100% - 2rem);
  background-color: #fff;
  padding: 1rem;
  font-weight: 500;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.flex_box .acDiv1 {
  width: 5rem;

}

.flex_box .acDiv2 {
  width: calc(100% - 5rem);
  line-height: 24px;

}

.flex_box span {
  color: #e92121;
}

.flex_box input {
  border: none;
  font-size: 1rem;
  text-align: right;
  outline: none;
}

.payBottom {
  width: 100%;
  height: 3.4375rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
}

.payBottom_1 {
}

.payBottom_1 span {
  color: #f62d40;
}

.payBottom_2 {
  height: 3.4375rem;
  width: 8.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #448eff 0%, #66a3ff 100%);
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ffffff;
}

.next_box {
  width: calc(100% - 2rem);
  height: 2.75rem;
  padding: 1rem 1rem 1.25rem 1rem;
  position: fixed;
  bottom: 0px;
  display: flex;
  justify-content: center;

  box-shadow: 0px 0px 13px 0px rgba(181, 190, 197, 0.28);
  background-color: #fff;
}

.next_box > div {
  border-radius: 3px;
  height: 100%;
  width: calc((100% - 1rem) / 2);
  text-align: center;
  line-height: 2.75rem;
  color: #fff;
}

.next_box > div:nth-of-type(1) {
  border: 0.0625rem solid #5aadfb;
  color: #5aadfb;
  margin-right: 0.6875rem;
}

.next_box > div:nth-of-type(2) {
  background: linear-gradient(-89deg, #448eff 0%, #66a3ff 100%);
  border: 1px solid #448eff;
  color: #fff;
}

input:disabled {
  background-color: #fff;
  opacity: 1;
}

.content_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  flex-flow: wrap;
  padding-bottom: 0.625rem;
}

.content_box .li {
  /* width: 59px; */
  padding: 0 0.625rem;
  height: 1.875rem;
  background: #f3f7fb;
  border-radius: 0.3125rem;
  text-align: center;
  line-height: 1.875rem;
  margin: 0.3125rem;
  font-size: 0.9375rem;
  color: #3f4551;
}

.active {
  background-color: #448eff !important;
  color: #fff !important;
}

.address_box {
  width: calc(100% - 0rem);

  background-color: #fff;
  padding-bottom: 1rem;
}

.address_box_1 {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  line-height: 3.75rem;
}

.address_box_1 > div:nth-of-type(1) {
  font-size: 1.0625rem;
  font-weight: bold;
  display: flex;
  align-items: center;
}

.address_box_1 > div:nth-of-type(1) > span {
  width: 0.1875rem;
  height: 1rem;
  background-color: #5aaefb;
  border-radius: 0.125rem;
  margin-right: 0.75rem;
}

.address_box_1 > div:nth-of-type(2) {
  font-size: 1rem;
}

.address_box_1 > div > img {
  width: 1.0625rem;
  height: 1.0625rem;
}

.address_box_2 {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  /* padding-right: 1.875rem; */
  display: flex;
}

.address_box_2 .tianjia {
  color: #448eff;
  font-size: 0.9375rem;
  border: 1px solid #448eff;
  padding: 0.3125rem 0.9375rem;
  border-radius: 0.25rem;
  margin-left: 1.25rem;
}

.address_box_2 .left {
  width: 3.125rem;
  color: #949fb4;
}

.address_box_2 .right {
  width: calc(100% - 3.125rem);
  display: flex;
  /* align-items: center; */
  /* justify-content: space-between; */
  font-size: 0.9375rem;
}

.address_box_2 .right img {
  width: 0.5rem;
  height: 0.875rem;
  margin-top: 0.3125rem;
  margin-left: 1.25rem;
}

.address_box_3 {
  width: calc(100% - 2rem);
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.875rem;
  font-size: 0.9375rem;
}

.address_box_3 > div > .span {
  color: #949fb4;
}

.papers_box {
  width: calc(100% - 2rem);
  background-color: #fff;
  padding: 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.papers_box > div {
  width: calc(100% / 2);
  height: 8rem;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-flow: column;
  font-size: 0.8125rem;
  color: #b6bdcc;
  position: relative;
}

.papers_box > div > div {
  text-align: center;
}

.papers_box > div > .AddUpload {
  height: 100%;
  width: 100%;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.papers_box > div > img {
  width: 10.125rem;
  height: 6.875rem;

  object-fit: contain;
}
</style>
